<template>
	<view class="search">
		<view class="head">
			<view class="bg"></view>
			<!-- <image class="bg" :src="$buildFullImageUrl('/static/consult/head-bg.png')"></image> -->
			<view>
				<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="搜索你感兴趣的测评"></uni-easyinput>
				<view class="btn" @click="handelSearch">搜索</view>
			</view>
		</view>
		<view class="con-wrap">
			<view class="scrollWrap">
				<z-paging :fixed="false" :auto="false" ref="paging" v-model="evaluateList" @query="queryList">
					<template #empty>
						<emptyView></emptyView>
					</template>
					<view class="box-container" v-if="total > 0">
						<view class="top">
							<text>搜索结果</text>
							<text>共{{ total }}条</text>
						</view>
						<view class="mid" v-for="(item, index) in evaluateList" :key="index">
							<image :src="$fullImageUrl(item.coverImage)"></image>
							<view class="mid-con">
								<view>{{ item.appraisalName }}</view>
								<view>
									<text>{{ item.appraisalPeopleFalse }}测过</text>
									<text>｜</text>
									<text>{{ item.appraisalNumber }}题</text>
								</view>
							</view>
							<view class="right-con">
								<view @click="itemClickDetail(item)">查看详情</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
import { getAppraisalList } from '@/api/evaluate/index.js';
export default {
	data() {
		return {
			searchValue: '',
			evaluateList: [],
			total: 0
		};
	},
	watch: {
		searchValue() {
			if (String(this.searchValue).trim().length === 0) {
				this.evaluateList = [];
				this.total = 0;
			}
		}
	},
	methods: {
		queryList(pageNum, pageSize) {
			const querys = {
				pageNum,
				pageSize,
				appraisalName: this.searchValue
			};
			getAppraisalList(querys).then((res) => {
				let list = [...res.rows];
				this.total = res.total;
				this.$refs.paging.completeByTotal(list, res.total);
			});
		},
		handelSearch() {
			this.$refs.paging.reload();
			// getAppraisalList({
			// 	appraisalName: this.searchValue
			// }).then((res) => {
			// 	this.evaluateList = res.rows;
			// 	this.total = res.total;
			// });
		},
		itemClickDetail(item) {
			//获取点击的列表项
			this.$tab.navigateTo(`/subset/pages/evaluate/evaluateDetail?id=${item.id}`);
		}
	}
};
</script>

<style scoped lang="scss">
.search {
	width: 100%;
	height: 100%;
	background: #f7f6f9;

	.head {
		width: 100%;
		height: 100rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%);
		}

		> view:last-child {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.btn {
				width: 100rpx;
				text-align: center;
				color: #666;
			}

			::v-deep .uni-easyinput {
				width: 584rpx !important;
				height: 64rpx;
			}

			::v-deep .uni-easyinput__content {
				width: 584rpx !important;
				height: 64rpx;
			}

			::v-deep .uni-easyinput__content-input {
				padding-left: 20rpx;
			}

			::v-deep .is-input-border {
				border-radius: 34rpx;
			}

			::v-deep .uniui-search {
				font-size: 34rpx !important;
			}
		}
	}

	.con-wrap {
		width: 100%;
		height: calc(100% - 100rpx);
		background-color: #fff;

		.scrollWrap {
			width: 100%;
			height: 100%;
		}

		.box-container {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			.top {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				> text {
					color: #a5a5a5;
					font-weight: 500;
					font-size: 30rpx;
				}
			}

			.mid {
				width: 100%;
				height: 160rpx;
				display: flex;
				margin-bottom: 30rpx;
				justify-content: space-between;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}

				.mid-con {
					width: calc(100% - 360rpx);
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					align-content: center;

					> view:nth-child(1) {
						width: 100%;
						font-size: 26rpx;
						font-weight: 500;
						color: #000;
						margin-bottom: 20rpx;
					}

					> view:last-child {
						width: 100%;
						display: flex;

						> text {
							color: #a5a5a5;
							font-size: 20rpx;
						}
						> text:nth-child(2) {
							margin: 0 10rpx;
						}
					}
				}
				.right-con {
					width: 100rpx;
					height: 100%;
					display: flex;
					align-items: center;
					> view {
						width: 170rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #0f80ff;
						font-size: 20rpx;
						border: 2rpx solid #0f80ff;
						border-radius: 45rpx;
					}
				}
			}
		}
	}
}
</style>
